<template>
	<view class="bar" :style="'height:'+statusHeight+'px'"></view>
	<uni-nav-bar backgroundColor="none" title="首页" border="false">
	</uni-nav-bar>
	<view class="content">
		<view class="idea">

			<view class="title">
				校园智能报修系统
			</view>
			<view class="ideas">
				快速报修.实时通知.方便统计
			</view>
			<image class="logo" src="../../static/icon/logo.png"></image>
			<view class="bg">
				1.0.0版本
			</view>

		</view>
		<view class="section">
			<view class="entry">
				<view class="left" @click="goMyrepair">

					<view class="title">
						我的报修
					</view>
					<text>
						报修记录 快速查询
					</text>
					<view class="imgBox">
						<image src="../../static/icon/icon3.png"></image>
					</view>

				</view>
				<view class="right">
					<view class="" @click="goRepair">
						<image src="../../static/icon/icon1.png"></image>维修师傅入口
					</view>
					<view class="" @click="goAdmin">
						<image src="../../static/icon/icon2.png"></image>管理员入口
					</view>
				</view>
			</view>
			<view class="box">
				<view class="item" @click="gotip">
					<view class="imgBox">
						<image src="../../static/icon/icon7.png"></image>
					</view>
					<view>报修助手</view>
				</view>
				<view class="item" @click="gocharts">
					<view class="imgBox">
						<image src="../../static/icon/icon4.png"></image>
					</view>

					<view>数据统计</view>
				</view>
				
				<view class="item">
					<button style="margin: 0 0 10rpx 0;border: none;padding: 0;box-sizing: border-box;" plain="true" open-type="contact" class="imgBox">
						<image src="../../static/icon/icon6.png"></image>
					</button>
					<view>在线客服</view>
				</view>
				<view class="item">
					<view class="imgBox">
						<image src="../../static/icon/icon5.png"></image>
					</view>

					<view>意见反馈</view>
				</view>
			</view>
			<view class="notice">
				<view style="text-align: center;">
					最新公告
				</view>
				<view class="item" v-for="item in list.array" @click="goNoticeDetail(item.noticeId)">
					<image src="../../static/icon/notice.png" class="img"></image>
					<view class="i_item">
						<view class="">
							{{item.noticetitle}}
						</view>
						<text style="overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">{{item.noticecontent}}</text>
						<view class="time">时间{{item.noticetime.substring(0,10)}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import api from '@/api/api'
	let statusHeight = ref(null)
	let list=reactive({
		array:[]
	})
	onLoad((options) => {
		uni.getSystemInfo({
			success: function(res) {
				statusHeight.value = res.statusBarHeight
			}
		})
	})
	onShow(()=>{
		api.getNoticeList({
			noticestatus:1
		}).then(res=>{
			list.array=res.data
		})
	})
	const goNoticeDetail=(id)=>{
		uni.navigateTo({
			url:'/pages/admin/notice/noticeadd?id='+id
		})
	}
	const gotip=()=>{
		uni.navigateTo({
			url:'/pages/index/tip'
		})
	}
	const gocharts=()=>{
		uni.navigateTo({
			url:'/pages/index/charts'
		})
	}
	const goMyrepair=()=>{
		if(uni.getStorageSync('info').identity!=='user'){
			uni.showToast({
				title:'管家、维修人员不支持该入口',
				icon:'none',
				duration:1500
			})
			return
		}
		uni.navigateTo({
			url: '/pages/myrepair/myrepair'
		})
	}
	const goRepair=()=>{
		if(uni.getStorageSync('info').identity!=='repairer'){
			uni.showToast({
				title:'您不是维修人员',
				icon:'none',
				duration:1500
			})
			return
		}
		uni.navigateTo({
			url: '/pages/repairer/repairer'
		})
	}
	const goAdmin=()=>{
		if(uni.getStorageSync('info').identity!=='admin'){
			uni.showToast({
				title:'您不是管理员',
				icon:'none',
				duration:1500
			})
			return
		}
		uni.navigateTo({
			url: '/pages/admin/admin'
		})
	}
	
	
	
	
</script>

<style lang="scss">
	.uni-navbar {
		.uni-navbar__content {
			border: 0 none !important;
		}
	}

	.content {
		margin:10rpx 30rpx;

		.idea {
			position: relative;
			width: 100%;
			height: 250rpx;
			background-color: #0b96ff;
			box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(131, 130, 130, 0.28);
			border-radius: 16rpx;

			.logo {
				position: absolute;
				top: 30rpx;
				right: 30rpx;
				width: 220rpx;
				height: 200rpx;
			}

			.title {
				font-size: 40rpx;
				padding-left: 30rpx;
				padding-top: 30rpx;
				color: white;
				font-weight: bold;
				// box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(131, 130, 130, 0.28);
			}

			.ideas {
				padding-left: 30rpx;
				padding-top: 10rpx;
				font-size: 26rpx;
				color: white;
			}

			.bg {
				box-sizing: border-box;
				font-size: 26rpx;
				color: white;
				position: absolute;
				bottom: 0;
				width: 100%;
				line-height: 60rpx;
				padding-left: 30rpx;
				border-bottom-left-radius: 16rpx;
				border-bottom-right-radius: 16rpx;
				background-color: rgba(131, 130, 130, 0.5);
			}
		}

		.section {
			.entry {
				margin-top: 30rpx;
				display: flex;
				justify-content: space-around;
				height: 250rpx;

				.left {
					box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(131, 130, 130, 0.28);
					width: 48%;
					background-color: #56dba4;
					border-radius: 16rpx;
					font-size: 26rpx;
					padding: 15rpx;
					box-sizing: border-box;
					color: white;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.title {
						font-size: 32rpx;
						margin-bottom: 10rpx;
					}

					image {
						width: 80rpx;
						height: 80rpx;
					}

					.imgBox {
						text-align: right;
					}
				}

				.right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					width: 48%;

					view {
						box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(131, 130, 130, 0.28);
						box-sizing: border-box;
						font-size: 26rpx;
						color: white;
						padding: 15rpx;
						border-radius: 16rpx;
						height: 120rpx;
						display: flex;
						align-items: center;

						image {
							width: 60rpx;
							height: 60rpx;
						}
					}

					view:first-child {
						background-color: #3abefe;
					}

					view:last-child {
						background-color: #8a8dec;
					}
				}
			}

			.box {
				margin-top: 30rpx;
				display: flex;
				justify-content: space-around;

				.item {
					.imgBox {
						box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(131, 130, 130, 0.28);
						display: flex;
						justify-content: center;
						align-items: center;
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						margin-bottom: 10rpx;
						
					}

					image {
						width: 60rpx;
						height: 60rpx;

						border-radius: 50%;
					}

					view {
						text-align: center;
						font-size: 28rpx;
					}
				}

				.item:first-child {
					.imgBox {
						background-color: #56dba4;
					}
				}

				.item:nth-child(2) {
					.imgBox {

						background-color: #33cefc;

					}

				}

				.item:nth-child(3) {
					.imgBox {
						background-color: #8a8dec;

					}

				}

				.item:last-child {
					.imgBox {
						background-color: #56dba4;
					}

				}
			}

			.notice {
				margin-top: 20rpx;

				.item {
					margin: 20rpx 0;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					// background-color: white;
					padding:20rpx ;
					border-radius: 16rpx;
					border: 1rpx dashed #999999;
					// box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(131, 130, 130, 0.28);
					.title {
						text-align: center;
						font-size: 32rpx;
						font-weight: bold;
					}

					.i_item {
						padding-left: 20rpx;
						height: 150rpx;
						flex: 1;

						text {
							font-size: 28rpx;
							color: rgba(131, 130, 130, 1);
						}

						.time {
							font-size: 24rpx;
							color: rgba(131, 130, 130, 1);
						}

						display: flex;
						flex-direction: column;
						justify-content: space-between;
					}

					.img {
						width: 150rpx;
						height: 150rpx;
						border-radius: 16rpx;
					}

				}

			}

		}
	}
</style>
